Description

Fixes #350

This adds a dynamic multiline layout to CustomEditor. When the message input grows past a single line (word wrap, explicit newlines, or multiple blocks), the editor shifts from a single-row layout into a two-row grid, before/textarea on top, with responsive content spanning the full width below. It drops back to single-row once the text fits on one line again.

The old replacementContent prop (which swapped out the textarea on mobile during voice recording) is gone. It's replaced by responsiveAfter, which renders inline next to the send button in single-line mode and moves down to the footer row in multiline mode. There's also a forceMultilineLayout prop for when you want to push into multiline immediately, which is what we use when the audio recorder opens. This means the recorder now takes the same code path on desktop and mobile instead of having a separate mobile-only branch.

A few other things got fixed along the way:

• Holding the record button on mobile was selecting the "following the conversation" text underneath it. Fixed with userSelect: none. (related to voice message recording not possible on phone bc ui design #350)
• The stop button's onClick was being skipped on mobile entirely, so if pointerup got lost mid-drag there was no way to stop recording. Now onClick works as a fallback when recording is already active. (a form of recovery in case more situations like voice message recording not possible on phone bc ui design #350 happen again)
• The waveform bar count is now calculated from the actual container width via ResizeObserver instead of a hardcoded number.
• cleanupMediaRecorder wasn't being called in all the stop/delete/restart/error/unmount paths, which could leave the mic track open. That's fixed.
• Firefox couldn't seek voice messages because audio/webm doesn't include a seek index. Codec preference now puts audio/ogg;codecs=opus first so Firefox records seekable blobs. Also added a seekTo helper that waits for loadedmetadata if the audio element isn't ready yet, and audio.preload = 'auto' + audio.load() on mount so Firefox parses metadata right away.
• Multiline wrap detection is now debounced through requestAnimationFrame and uses a ResizeObserver on the scroll container to cut down on flicker and extra re-renders.
• Added cloudflared tunnels for easier testing on mobile

Also sorry for the cursed line height measurer, there was legit no other way to detect it that didn't cause other issues.

Good amount of this was created with help of AI (like figuring out options on how to fix the edge cases), especially the edge case unit tests, but It had to be fixed by hand in many places and frankly I can't tell you exactly where was what. I've been working on this for couple days now.. (losing my mind over it)

Screenshots:

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

AI disclosure:

• Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
• Fully AI generated (explain what all the generated code does in moderate detail).